<template>
  <div class="history-problem-description">
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane label="题目列表" name="tabList">
        <el-table :data="problemData" style="width: 100%" :stripe="true">
          <el-table-column prop="id" label="#" width="80"> </el-table-column>
          <el-table-column prop="title" label="题目" width="200">
            <template slot-scope="scope">
              <el-link type="primary" @click="onProblemClick(scope.row)">
                {{ scope.row.title }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度"> </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="题目内容"
        name="tabDescription"
        :disabled="isDescriptionDisabled"
      >
        <el-form :model="problem" label-width="80px">
          <el-form-item label="题目名称">
            <div
              style="
                background-color: #f6f6f6;
                padding: 0 20px;
                border-radius: 4px;
              "
            >
              {{ this.problem.title }}
            </div>
          </el-form-item>
          <el-form-item label="题目难度">
            <el-rate
              v-if="problem.difficulty"
              v-model="problem.difficulty"
              :max="3"
              :texts="['简单', '中等', '困难']"
              show-text
              disabled
            ></el-rate>
            <el-tag v-else disable-transitions>待定</el-tag>
          </el-form-item>
          <el-form-item label="题目描述">
            <div
              style="
                background-color: #f6f6f6;
                padding: 0 20px;
                border-radius: 4px;
              "
            >
              {{ problem.content }}
            </div>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane
        label="面试官选项"
        :disabled="isInterviewee"
        name="tabInterviewerOption"
      >
        <el-table :data="problemData" style="width: 100%" :stripe="true">
          <el-table-column prop="id" label="#" width="80"> </el-table-column>
          <el-table-column prop="title" label="题目" width="200">
            <template slot-scope="scope">
              <el-link type="primary" @click="onProblemClick(scope.row)">
                {{ scope.row.title }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度"> </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="12" :offset="10">
            <span>当前观看：</span>
            <el-select
              class="interviewer-select"
              v-model="interviewee"
              placeholder="请选择要观看的面试者"
              @change="onIntervieweeChange"
              @visible-change="onIntervieweeSelectClick"
            >
              <el-option
                v-for="user in userData"
                :key="user._id"
                :label="user.username"
                :value="user._id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" :offset="10">
            <span>面试邀请码：</span>
            <el-tag>
              {{ this.inviteCode }}
            </el-tag>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "InterviewProblemDescription",
  components: {},
  mounted() {
    this.judgeInterviewee();
    this.getProblemData();
  },
  methods: {
    onIntervieweeSelectClick(visible) {
      // 请求用户列表
      if (visible) {
        //请求用户列表存入userData
        let roomId = this.$route.params.rid;
        axios
          .get("/api/room/intervieweeall", {
            params: {
              rid: roomId,
            },
          })
          .then((response) => {
            console.log(response);
            this.userData = response.data.result.intervieweeSet;
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        // this.setUserDataDefault();
      }
    },
    onIntervieweeChange(userId) {
      console.log("onIntervieweeChange", userId);
      this.$emit("onIntervieweeChange", userId);
    },
    judgeInterviewee() {
      const type = window.sessionStorage.getItem("usertype");
      if (type != 1) {
        this.isInterviewee = true;
      } else {
        this.isInterviewee = false;
        let roomId = this.$route.params.rid;
        this.inviteCode = roomId;
      }
    },
    setUserDataDefault() {
      this.userData = [
        {
          username: "user1",
          _id: "111",
          status: 1,
        },
        {
          username: "user2",
          _id: "222",
          status: 1,
        },
        {
          username: "user3",
          _id: "333",
          status: 1,
        },
      ];
    },
    setProblemDefault() {
      this.problem = {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      };
    },
    getProblemData() {
      // this.$emit("deliverProblemData", this.problemData);
      let roomId = this.$route.params.rid;
      axios
        .get("/api/room/problemall", {
          params: {
            rid: roomId,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.problemData = response.data.result.problemSet;
            this.problemData.forEach((problem, index) => {
              problem["id"] = index + 1;
            });
            this.$message.success("获取面试题目成功");
            this.$emit("deliverProblemData", this.problemData);
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取面试题目失败");
          this.$emit("deliverProblemData", this.problemData);
        });
    },
    onProblemClick(row) {
      this.problem = JSON.parse(JSON.stringify(row));
      this.isDescriptionDisabled = false;
      this.activeTab = "tabDescription";
    },
  },
  data() {
    return {
      activeTab: "tabInterviewerOption",
      isDescriptionDisabled: true,
      isInterviewee: false,
      inviteCode: "",
      interviewee: "",
      userData: [],
      // userData: [
      //   {
      //     username: "user1",
      //     _id: "111",
      //     status: 1,
      //   },
      //   {
      //     username: "user2",
      //     _id: "222",
      //     status: 1,
      //   },
      //   {
      //     username: "user3",
      //     _id: "333",
      //     status: 1,
      //   },
      // ],
      problem: {
        _id: "",
        title: "",
        difficulty: 0,
        content: "",
        status: 0,
      },
      problemData: [],
      // problemData: [
      //   {
      //     _id: "1",
      //     title: "test1",
      //     difficulty: 1,
      //     content: "111111",
      //     status: 1,
      //   },
      //   {
      //     _id: "2",
      //     title: "test2",
      //     difficulty: 2,
      //     content: "222222",
      //     status: 1,
      //   },
      //   {
      //     _id: "3",
      //     title: "test3",
      //     difficulty: 3,
      //     content: "333333",
      //     status: 1,
      //   },
      // ],
    };
  },
};
</script>
<style scoped></style>
